<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>.stop 防止事件冒泡</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <link rel="stylesheet" href="./Css/css1.css">
</head>

<body>
    <div id="app">
        <!-- .stop() 用于有多个事件时，防止事件的冒泡，比如:在父类中有子类，点击子类时父类就会冒泡，stop()就是阻止父类冒泡 -->
        <div class="outeer" @click.stop="outer">
            <div class="middle" @click.stop="middle">
                <button @click.stop="inner">点击我(^_^)</button>
            </div>
        </div>
        <p>{{ message }}</p>
    </div>
    <script>
        var app = new Vue({　　
            el: '#app',
            　　data: {　　　　
                message: '测试冒泡事件'
            },
            　　methods: {　　　　
                inner: function() {　　　　　　
                    this.message = 'inner： 这是最里面的Button';　　
                    console.log('inner： 这是最里面的Button');
                },
                middle: function() {　　　　　　
                    this.message = 'middle: 这是中间的Div'　　　　
                    console.log('middle: 这是中间的Div');
                },
                outer: function() {　　　　　　
                    this.message = 'outer: 这是外面的Div'　　;
                    console.log('outer: 这是外面的Div')　　;
                }　　
            }
        })
    </script>
</body>

</html>